<template>
  <div class="el-form-item">
    <div class="el-form-item__content">
      <div class="el-input">
        <input
          type="text"
          readonly="readonly"
          autocomplete="off"
          :placeholder="title"
          class="el-input__inner"
          @click="handleClick"
          :value="getEduLabelWidthValue(targetLevel)"
        />
      </div>
    </div>
    <popup v-model="showLevelPicker" position="bottom">
      <Picker
        show-toolbar
        @cancel="handlePopClose"
        @confirm="handlePopConfirm"
        :title="title"
        :columns="options.map((item) => item.label)"
      />
    </popup>
  </div>
</template>
<script>
import { Picker, Popup, Cell } from "vant";

export default {
  props: {
    title: {
      type: String,
      default: "选择学历",
    },
    targetLevel: {
      type: String,
      default: "-1",
    },
  },
  //组件注入
  components: { Picker, Popup, Cell },
  //存放数据
  data() {
    return {
      showLevelPicker: false,
      options: [
        { label: "未选择", value: "-1" },
        { label: "博士", value: "7" },
        { label: "MBA/EMBA", value: "6" },
        { label: "研究生", value: "5" },
        { label: "本科", value: "4" },
        { label: "大专", value: "3" },
        { label: "中专/中技", value: "2" },
        { label: "高中", value: "1" },
        { label: "初中", value: "0" },
      ],
    };
  },
  methods: {
    getEduLabelWidthValue(value) {
      const finder = this.options.find(
        (item) => item.value === value.toString()
      );
      return finder ? finder.label : "";
    },
    getEduValueWidthLabel(label) {
      const finder = this.options.find(
        (item) => item.label === label.toString()
      );
      return finder ? finder.value : "";
    },
    handleClick(evt) {
      this.showLevelPicker = true;
    },
    handlePopClose(evt) {
      this.showLevelPicker = false;
    },
    handlePopConfirm(val) {
      this.$emit("changeLevel", this.getEduValueWidthLabel(val));
      this.handlePopClose();
    },
  },
};
</script>
<style></style>
